<template>
    <div class="app-container">
        <!-- 操作栏 -->
        <div class="mb-4 flex justify-between">
            <div>
                <el-button type="primary" @click="handleCreate">新建模型</el-button>
                <el-button @click="refreshList" style="margin-left: 10px">刷新列表</el-button>
            </div>
            <el-input v-model="searchKeyword" placeholder="搜索模型名称/描述" style="width: 300px" clearable
                @input="handleSearch" />
        </div>

        <!-- 数据表格 -->
        <el-table :data="filteredModels" border style="width: 100%" v-loading="loading">
            <el-table-column prop="modelId" label="ID" width="80" />
            <el-table-column prop="modelName" label="模型名称" width="180" />
            <el-table-column prop="modelType" label="模型类型" width="120">
                <template #default="{ row }">
                    <el-tag :type="getModelTypeTag(row.modelType)">{{ row.modelType }}</el-tag>
                </template>
            </el-table-column>
            <el-table-column prop="framework" label="框架" width="120" />
            <el-table-column prop="version" label="版本" width="100" />
            <el-table-column prop="status" label="状态" width="120">
                <template #default="{ row }">
                    <el-tag :type="statusTagMap[row.status]">{{ statusMap[row.status] }}</el-tag>
                </template>
            </el-table-column>
            <el-table-column prop="description" label="描述" />
            <el-table-column prop="createdAt" label="创建时间" width="180" />
            <el-table-column label="操作" width="220" fixed="right">
                <template #default="{ row }">
                    <el-button size="small" @click="handleEdit(row)">编辑</el-button>
                    <el-button size="small" type="danger" @click="handleDelete(row)">删除</el-button>
                    <el-button size="small" type="success" v-if="row.status === 1"
                        @click="handleDeploy(row)">部署</el-button>
                </template>
            </el-table-column>
        </el-table>

        <!-- 编辑对话框 -->
        <el-dialog v-model="dialogVisible" :title="isEdit ? '编辑模型' : '新建模型'" width="40%">
            <el-form :model="form" :rules="rules" ref="formRef" label-width="100px">
                <el-form-item label="模型名称" prop="modelName">
                    <el-input v-model="form.modelName" />
                </el-form-item>
                <el-form-item label="模型类型" prop="modelType">
                    <el-select v-model="form.modelType" placeholder="请选择模型类型">
                        <el-option v-for="type in modelTypes" :key="type.value" :label="type.label"
                            :value="type.value" />
                    </el-select>
                </el-form-item>
                <el-form-item label="框架" prop="framework">
                    <el-select v-model="form.framework" placeholder="请选择框架">
                        <el-option v-for="fw in frameworks" :key="fw.value" :label="fw.label" :value="fw.value" />
                    </el-select>
                </el-form-item>
                <el-form-item label="版本号" prop="version">
                    <el-input v-model="form.version" />
                </el-form-item>
                <el-form-item label="状态" prop="status">
                    <el-select v-model="form.status" placeholder="请选择状态">
                        <el-option v-for="(label, value) in statusMap" :key="value" :label="label"
                            :value="Number(value)" />
                    </el-select>
                </el-form-item>
                <el-form-item label="描述">
                    <el-input v-model="form.description" type="textarea" :rows="3" />
                </el-form-item>
            </el-form>

            <template #footer>
                <span class="dialog-footer">
                    <el-button @click="dialogVisible = false">取消</el-button>
                    <el-button type="primary" @click="submitForm"> 确认 </el-button>
                </span>
            </template>
        </el-dialog>
    </div>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'

// 状态映射
const statusMap = {
    0: '未训练',
    1: '已训练',
    2: '训练中',
    3: '已部署',
    4: '异常'
}

const statusTagMap = {
    0: 'info',
    1: 'success',
    2: 'warning',
    3: '',
    4: 'danger'
}

// 模型类型选项
const modelTypes = [
    { value: 'classification', label: '分类模型' },
    { value: 'regression', label: '回归模型' },
    { value: 'ner', label: '命名实体识别' },
    { value: 'llm', label: '大语言模型' }
]

// 框架选项
const frameworks = [
    { value: 'TensorFlow', label: 'TensorFlow' },
    { value: 'PyTorch', label: 'PyTorch' },
    { value: 'Keras', label: 'Keras' },
    { value: 'HuggingFace', label: 'HuggingFace' }
]

// 示例初始数据
const initialData = [
    {
        modelId: 1,
        modelName: 'gpt-4o',
        modelType: 'llm',
        framework: 'HuggingFace',
        version: '1.0.0',
        status: 3,
        description: '用于SQL纠错分析',
        createdAt: '2025-03-15 14:30'
    },
    {
        modelId: 2,
        modelName: 'qwen-coder:14b',
        modelType: 'regression',
        framework: 'HuggingFace',
        version: '2.1.1',
        status: 3,
        description: '用于SQL代码补全',
        createdAt: '2025-03-16 09:15'
    }
]

const searchKeyword = ref('')
const dialogVisible = ref(false)
const isEdit = ref(false)
const loading = ref(false)
const form = ref({})
const models = ref([...initialData])
const formRef = ref(null)

// 验证规则
const rules = {
    modelName: [{ required: true, message: '请输入模型名称', trigger: 'blur' }],
    modelType: [{ required: true, message: '请选择模型类型', trigger: 'change' }],
    framework: [{ required: true, message: '请选择框架', trigger: 'change' }],
    version: [{ required: true, message: '请输入版本号', trigger: 'blur' }],
    status: [{ required: true, message: '请选择状态', trigger: 'change' }]
}

// 过滤后的数据
const filteredModels = computed(() => {
    return models.value.filter(
        (item) =>
            item.modelName.includes(searchKeyword.value) ||
            item.description.includes(searchKeyword.value)
    )
})

// 获取模型类型标签样式
const getModelTypeTag = (type) => {
    const typeMap = {
        classification: 'success',
        regression: 'warning',
        ner: 'danger',
        llm: 'primary'
    }
    return typeMap[type] || ''
}

// 刷新列表
const refreshList = async () => {
    loading.value = true
    // 这里可以添加API请求
    setTimeout(() => {
        loading.value = false
        ElMessage.success('刷新成功')
    }, 1000)
}

// 处理部署
const handleDeploy = (row) => {
    ElMessageBox.confirm('确认部署该模型？', '部署确认', {
        confirmButtonText: '确认部署',
        cancelButtonText: '取消'
    }).then(() => {
        models.value = models.value.map(item => {
            if (item.modelId === row.modelId) {
                return { ...item, status: 3 }
            }
            return item
        })
        ElMessage.success('部署请求已提交')
    })
}

// 搜索处理
const handleSearch = () => {
    // 过滤逻辑由计算属性自动处理
}

// 打开创建对话框
const handleCreate = () => {
    isEdit.value = false
    form.value = {
        id: null,
        title: '',
        content: '',
        tags: [],
        createdAt: ''
    }
    dialogVisible.value = true
}

// 打开编辑对话框
const handleEdit = (row) => {
    isEdit.value = true
    form.value = { ...row }
    dialogVisible.value = true
}

// 提交表单
const submitForm = async () => {
    await formRef.value.validate((valid) => {
        if (valid) {
            if (isEdit.value) {
                // 更新逻辑
                const index = prompts.value.findIndex((item) => item.id === form.value.id)
                prompts.value.splice(index, 1, {
                    ...form.value,
                    updatedAt: new Date().toISOString()
                })
            } else {
                // 新增逻辑
                prompts.value.push({
                    ...form.value,
                    id: Date.now(),
                    createdAt: new Date().toISOString()
                })
            }
            dialogVisible.value = false
            ElMessage.success(isEdit.value ? '更新成功' : '创建成功')
        }
    })
}

// 删除处理
const handleDelete = (row) => {
    ElMessageBox.confirm('确认删除该模型？', '警告', {
        confirmButtonText: '确认',
        cancelButtonText: '取消',
        type: 'warning'
    }).then(() => {
        prompts.value = prompts.value.filter((item) => item.id !== row.id)
        ElMessage.success('删除成功')
    })
}
</script>

<style scoped>
.app-container {
    padding: 20px;
}

.mb-4 {
    margin-bottom: 1rem;
}
</style>